<template>
  <view class="navbar">
    <view class="fixed-content">
      <!-- 状态栏高度 -->
      <view :style="{'height': geStatusBarHeight + 'px'}"></view>
      <!-- 导航栏高度 -->
      <view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
        <image @tap="navigateBack()" class="nav-left" src="/static/img/common/arrow-left.png" mode=""></image>
        <view class="nav-title font-14">{{ title }}</view>
        <slot></slot>
      </view>
    </view>
    <!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
    <view :style="{'height': geStatusBarHeight + getNavBarHeight() + 'px'}"></view>
  </view>
</template>
<script>
export default {
  name:'Navbar',
  props:{
    title:{
      type: String,
      default:''
    }
  },
  methods: {
    // 获取状态栏高度
    geStatusBarHeight(){
      return uni.getSystemInfoSync()['statusBarHeight']
    },
    // 获取导航栏高度
    getNavBarHeight(){
      // #ifdef MP-WEIXIN
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      // 导航栏高度 = 胶囊高度 + 上间距 + 下间距 + 微调	（menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight'] = 上间距）
      let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()['statusBarHeight']) * 2 + 2
      // #endif
      // #ifdef APP-PLUS || H5
      let navbarHeight = 0
      // #endif
      return navbarHeight
    },
    navigateBack(){
      uni.navigateBack()
    }
  }
}
</script>
<style lang="scss" scoped>
.navbar{
  .fixed-content {
    width: 100%;
    padding: 48rpx 24rpx;
    background-color: #ffffff;
    .bar-content{
      display: flex;
      align-items: center;
      position: relative;
      .nav-left{
        width: 22px;
        height:22px;
        position: absolute;
        z-index: 2;
        top: 50%;
        transform: translateY(-50%);
      }
      .nav-title{
        color: #171A1D;
        width: 100%;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        text-align: center;
      }
    }
  }
}
</style>